<template>
  <el-dialog title="分享问卷" :visible.sync="visible" width="50%">
    <div class="share-content">
      <p>复制以下链接以分享问卷:</p>
      <el-input v-model="url" readonly>
        <template slot="append">
          <el-button @click="copyUrl">复制链接</el-button>
        </template>
      </el-input>
      <p>或者扫描以下二维码:</p>
      <qrcode-vue :value="url" size="150" level="H"></qrcode-vue>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import QrcodeVue from 'qrcode.vue';

export default {
  components: {
    QrcodeVue
  },
  data() {
    return {
      visible: false,
      url: ''
    };
  },
  methods: {
    open(url) {
      this.url = url;
      this.visible = true;
    },
    copyUrl() {
      navigator.clipboard.writeText(this.url).then(() => {
        this.$message.success('链接已复制到剪贴板');
      }).catch(err => {
        this.$message.error('复制失败: ', err);
      });
    }
  }
};
</script>

<style scoped>
.share-content {
  text-align: center;
}

.el-input {
  margin-bottom: 20px;
}

.qrcode {
  display: inline-block;
}
</style>
